<template>
  <div class="app-container">
    <el-card>
      <!--用户数据-->
      <el-form :model="queryParams" ref="queryForm" size="small" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model.trim="queryParams.userName" @input="handleQuery" placeholder="输入内容" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="教工号">
              <el-input v-model.trim="queryParams.jsNumber" @input="handleQuery" placeholder="输入内容" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学院">
              <el-select v-model="queryParams.xyId" filterable clearable @change="handleQuery">
                <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实践课程">
              <el-select v-model="queryParams.practiceType" clearable placeholder="请选择" @change="handleQuery">
                <el-option v-for="item in practiceTypeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="时间">
              <el-date-picker v-model="dateRangeQuery" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                @change="handleQuery" style="width: 100%" start-placeholder="起始日期"
                end-placeholder="截至日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item label-width="30px">
              <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" :disabled="tableList.length === 0" plain icon="el-icon-plus" size="mini"
            v-hasPermi="['score:export:scoreExport']" @click="handleExport">导出</el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="tableList">
        <el-table-column type="index" align="center" />
        <el-table-column label="姓名" align="center" key="userName" prop="userName" :show-overflow-tooltip="true" />
        <el-table-column label="教工号" align="center" key="jsNumber" prop="jsNumber" :show-overflow-tooltip="true" />
        <el-table-column label="学院" align="center" key="xyName" prop="xyName" :show-overflow-tooltip="true" />
        <el-table-column label="实践课程" align="center" key="practiceTypeName" prop="practiceTypeName" />
        <el-table-column label="发布任务数量" align="center" key="releasePracticeTaskNumber" prop="releasePracticeTaskNumber">
          <template slot-scope="scope">
            {{ scope.row.releasePracticeTaskNumber || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="任务积分数" align="center" key="practiceTaskPoints" prop="practiceTaskPoints">
          <template slot-scope="scope">
            {{ scope.row.practiceTaskPoints || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="任务总学生数" align="center" key="practiceTaskPeoples" prop="practiceTaskPeoples">
          <template slot-scope="scope">
            {{ scope.row.practiceTaskPeoples || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="审核数量" align="center" key="checkNumber" prop="checkNumber">
          <template slot-scope="scope">
            {{ scope.row.checkNumber || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="新增题目数" align="center" key="addQuestionNumber" prop="addQuestionNumber">
          <template slot-scope="scope">
            {{ scope.row.addQuestionNumber || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="组卷数量" align="center" key="testPaperNumber" prop="testPaperNumber">
          <template slot-scope="scope">
            {{ scope.row.testPaperNumber || 0 }}
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.currentPage"
        :limit.sync="queryParams.currentSize" @pagination="getList" />
    </el-card>
  </div>
</template>

<script>
import { typeCongfigList } from "@/api/semesManage";
import { listProxy } from "@/api/project/prold";
import { getWorkLoad } from "@/api/applicaAudits/index";
export default {
  name: "teachWork",
  data() {
    return {
      loading: false,
      total: 0,
      tableList: [],
      dateRangeQuery: [], // 查询
      proxyList: [], // 学院
      practiceTypeList: [], // 实践课程
      queryParams: {
        currentPage: 1,
        currentSize: 10,
        practiceType: undefined,
        startTime: undefined,
        endTime: undefined
      },
    };
  },
  created() {
    // const permissList = sessionStorage.getItem('practiceTypes').split(',');
    // const typeMap = {
    //   1: { type: '劳动教育', id: 1 },
    //   2: { type: '职业素养', id: 2 },
    //   3: { type: '应急安全', id: 3 },
    //   4: { type: '思政实践', id: 4 },
    //   5: { type: '创新创业', id: 5 }
    // };

    // permissList.forEach(v => {
    //   if (typeMap[v]) {
    //     this.practiceTypeList.push(typeMap[v]);
    //   }
    // });

    this.getTypeCongfigList();
    this.getList();
    this.getListProxy();
  },
  methods: {
    getTypeCongfigList() {
      typeCongfigList({
        pageNum: 1,
        pageSize: 50,
      }).then(res => {
        this.practiceTypeList = res.rows;
      });
    },
    // 列表
    getList() {
      let dataQuery = { ...this.queryParams };
      if (dataQuery.limit) {
        delete dataQuery.limit;
        delete dataQuery.page;
      }
      const time = this.dateRangeQuery && this.dateRangeQuery.length > 0 ? { startTime: this.dateRangeQuery[0] + ' 00:00:00', endTime: this.dateRangeQuery[1] + ' 23:59:59' } : {};
      getWorkLoad({ ...dataQuery, ...time }).then(res => {
        this.total = res.data.total;
        this.tableList = res.data.data;
      })
    },
    // 查询学院
    getListProxy() {
      listProxy().then((response) => {
        this.proxyList = [];
        response.rows.forEach((v) => this.proxyList.push(v));
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.currentPage = 1;
      this.getList();
    },
    // 重置
    resetQuery() {
      this.queryParams = {
        currentPage: 1,
        currentSize: 10,
        practiceType: undefined,
        startTime: undefined,
        endTime: undefined
      };
      this.dateRangeQuery = [];
      this.getList();
      this.getListProxy();
    },

    /** 导出按钮操作 */
    handleExport() {
      const { currentPage, currentSize, ...data } = this.queryParams;
      const time = this.dateRangeQuery && this.dateRangeQuery.length > 0 ? { startTime: this.dateRangeQuery[0] + ' 00:00:00', endTime: this.dateRangeQuery[1] + ' 23:59:59' } : {};
      this.download('/teacher/work/load/export  ', {
        ...data,
        ...time
      }, `教师工作量分布导出.xlsx`)
    }
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-select {
  width: 100% !important;
}
</style>
